<template>
  <view class="evaluate">
    <view class="evaluate__head">
      <view class="evaluate__head__left">
        <lr-image width="60rpx" height="60rpx" radius="50%"></lr-image>
        <view class="evaluate__head__left--name">学员-张三</view>
      </view>
      <view class="evaluate__head__right flex-shrink">
        <text class="color-7b">2024.03.31 09:00</text>
      </view>
    </view>
    <template v-if="userShow">
      <view class="rate">
        <view class="rate--label">讲课认真，课堂气氛活跃</view>
        <u-rate :count="count" v-model="data.value" :readonly="true" activeColor="#2289FF"></u-rate>
      </view>
      <view class="rate">
        <view class="rate--label">上课耐心细致，无迟到早退</view>
        <u-rate :count="count" v-model="data.value2" :readonly="true" activeColor="#2289FF"></u-rate>
      </view>
      <view class="rate">
        <view class="rate--label">教学规划清晰，教学目标明确</view>
        <u-rate :count="count" v-model="data.value3" :readonly="true" activeColor="#2289FF"></u-rate>
      </view>
    </template>
    <view class="evaluate__value color-7b">
      这是课程评价这是课程评价这是课程评价这是课程评价这是课程评价
    </view>
    <view class="evaluate__upload">
      <view class="evaluate__upload--item" v-for="(item,index) in 5" :key="index">
        <lr-image width="168rpx" height="168rpx" radius="8rpx"></lr-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "lr-evaluate",
  data(){
    return {
      count: 5,
    }
  },
  props: {
    userShow: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return { value: 1, value2: 2, value3: 3 }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.evaluate {
  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &__left {
      display: flex;
      align-items: center;

      &--name {
        margin-left: 20rpx;
        font-size: $u-unit-font;
      }
    }

    &__right {
      font-size: $u-unit-font;
    }
  }

  &__value {
    padding: 20rpx 0;
    font-size: $u-unit-font;
    line-height: 1.5;
  }

  &__upload {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;

    &--item {
      margin-bottom: 20rpx;
    }
  }

  .rate {
    padding: 24rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &--label {
      width: 60%;
    }
  }
}
</style>
